<template>
  <div class="brand_wrap">
    <div class="brand_title">
      <h1>热门品牌</h1>
      <div class="btn_wrap">
        <button
          :disabled="btnFlag == 'prev'"
          :class="btnFlag == 'prev' ? 'active' : ''"
          @click="prev"
        >
          &lt;
        </button>
        <button
          :disabled="btnFlag == 'next'"
          :class="btnFlag == 'next' ? 'active' : ''"
          @click="next"
        >
          &gt;
        </button>
      </div>
    </div>
    <div class="brand_list" ref="mylist">
      <div class="list_one" v-for="(item, index) in brandList" :key="index">
        <img :src="item.logo" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import { _getHotBrand } from '../../../api/home'
export default {
  data () {
    return {
      btnFlag: 'prev',
      brandList: [] //热门品牌数据
    }
  },
  created () {
    this.getBrand()
  },
  methods: {
    prev () {
      this.btnFlag = 'prev'
      var timer = setInterval(() => {
        // 获取原来的scrollLeft
        let scleft = this.$refs.mylist.scrollLeft
        scleft -= 5
        this.$refs.mylist.scrollLeft = scleft
        if (this.$refs.mylist.scrollLeft <= 0) {
          clearInterval(timer)
        }
      }, 1)
    },
    next () {
      this.btnFlag = 'next'
      let timer = setInterval(() => {
        var scleft = this.$refs.mylist.scrollLeft
        scleft += 5
        this.$refs.mylist.scrollLeft = scleft
        if (this.$refs.mylist.scrollLeft >= 1240) {
          clearInterval(timer)
        }
      }, 1)
    },
    // 获取热门品牌接口方法调用
    async getBrand () {
      var res = await _getHotBrand(10)
      this.brandList = res.data.result
    }
  }
}
</script>
<style lang="less">
.brand_wrap {
  height: 440px;
  width: 1240px;
  margin: 10px auto;
  overflow: hidden;
  .brand_title {
    width: 1240px;
    display: flex;
    justify-content: space-between;
    button {
      outline: none;
      padding: 10px;
      font-family: '黑体';
      margin-right: 10px;
      border: none;
      cursor: pointer;
    }
    .active {
      background: #27bb9a;
    }
  }
}
.brand_list {
  width: 1240px;
  height: 305px;
  display: flex;
  overflow: hidden;
  transition: all 1s;
  justify-content: space-between;
  .list_one {
    width: 240px;
    height: 305px;
    margin-left: 10px;
    img {
      width: 240px;
      height: 305px;
    }
  }
}
</style>
